<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的输入输出语句</title>
    <!--<script src="js/01_data_type.js"></script>-->
    <link href="./js/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="./js/jquery.js"></script>
</head>
<style>
    body {
        padding: 15px;
    }

    .custom {
        width: 50%;
        margin: auto;
    }

    .center > div {
        margin-right: 27px;
    }

    .center > div:last-child {
        margin-right: 0;
    }

</style>
<body>

<!-- 添加图书的 Panel面板 -->
<div class="panel panel-primary custom">
    <!-- Default panel contents -->
    <div class="panel-heading">
        <h3 class="panel-title">添加新图书</h3>
    </div>
    <div class="panel-body form-inline center">
        <div class="input-group">
            <div class="input-group-addon">书名</div>
            <input class="form-control" id="iptBookName" placeholder="请输入书名" type="text">
        </div>

        <div class="input-group">
            <div class="input-group-addon">作者</div>
            <input class="form-control" id="iptAuthor" placeholder="请输入作者" type="text">
        </div>

        <div class="input-group">
            <div class="input-group-addon">出版社</div>
            <input class="form-control" id="iptPublisher" placeholder="请输入出版者" type="text">
        </div>

        <button class="btn btn-primary" id="btnAdd" onclick="addBook()">添加</button>
    </div>

    <!-- 图书的表格 -->
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    let tbody = document.querySelector('tbody');

    const baseURL = 'http://www.liulongbin.top:3006';


    getBookList();

    function getBookList() {
        $.ajax({
            type: 'GET',
            url: `${baseURL}/api/getbooks`,
            success: (res) => {
                // 判断列表数据是否成功
                if (res.status === 200) {
                    console.log(res)
                    tbody.innerHTML = '';
                    for (let i = 0; i < 10; i++) {
                        generateTbody(res.data[i]);
                    }
                } else {
                    alert('获取图书列表失败!')
                }
            }
        })
    }

    function generateTbody(obj) {
        let tr = document.createElement('tr');
        for (let objKey in obj) {
            let td = document.createElement('td');
            td.innerHTML = obj[objKey]
            tr.appendChild(td);
        }
        let operaTd = document.createElement('td');
        operaTd.innerHTML = `<a class="del" href="javascript:;" onclick="delBook(${obj.id})">操作</a>`
        tr.appendChild(operaTd);

        tbody.appendChild(tr);
    }

    function delBook(id) {
        if (id !== '') {
            $.ajax({
                type: 'GET',
                url: `${baseURL}/api/delbook`,
                data: {'id': id},
                success: (res) => {
                    if (res.status === 200) {
                        getBookList();
                        alert('删除图书成功!')
                    } else {
                        alert('删除图书失败===========!')
                    }
                }
            })
        }
    }

    function addBook() {
        // 1. 检测内容是否为空
        let bookName = $('#iptBookName').val().trim()
        let author = $('#iptAuthor').val().trim()
        let publisher = $('#iptPublisher').val().trim()
        if (bookName === '' || author === '' || publisher === '') {
            return alert('请完整填写图书信息！')
        }
        $.ajax({
            type: 'post',
            url: `${baseURL}/api/addbook`,
            data: {bookname: bookName, author: author, publisher: publisher},
            success: (res) => {
                if (res.status !== 201) {
                    return alert('添加书籍失败!')
                } else {
                    // 添加成功后, 刷新列表
                    getBookList()
                    // 清空文本框内容
                    $('input:text').val('')
                }
            }
        })
    }

    // 通过代理的方式为动态添加的元素绑定点击事件
    /*$('tbody').on('click', '.del', () => {

    })*/
</script>
</body>
</html>
